import { LocalizationContext } from "../../core";

import HandToolIcon from "./HandToolIcon";
import SelectionMode from "./SelectionMode";
import TextSelectionIcon from "./TextSelectionIcon";
import { FC, ReactElement, useContext } from "react";

interface RenderChildren {
  icon: ReactElement;
  label: string;
  onClick(): void;
}

interface SwitchSelectionModeDecoratorProps {
  children(props: RenderChildren): ReactElement;
  mode: SelectionMode;
  onClick(): void;
}

const SwitchSelectionModeDecorator: FC<SwitchSelectionModeDecoratorProps> = ({
  children,
  mode,
  onClick,
}) => {
  const l10n = useContext(LocalizationContext);

  let label = "";
  let icon: ReactElement;

  switch (mode) {
    case SelectionMode.Hand:
      label = (l10n && l10n.selectionMode
        ? l10n.selectionMode.handTool
        : "Hand tool") as string;
      icon = <HandToolIcon />;
      break;

    case SelectionMode.Text:
    default:
      label = (l10n && l10n.selectionMode
        ? l10n.selectionMode.textSelectionTool
        : "Text selection tool") as string;
      icon = <TextSelectionIcon />;
      break;
  }

  return children({ icon, label, onClick });
};

export default SwitchSelectionModeDecorator;
